<template lang="pug">
	.invoice-wrap
		div(@click="findPatient")
			field-item(text="就诊人" :showArrow="true" :option="name" hint="切换" :showBorder="false")
		scroll-view.invoice-content(scroll-y @scrolltolower="scrollToLower")
			no-item(text="暂无相关记录" v-if="noItem")
			.invoice-item(v-for="(item,index) in list" :key="index" @click="goDetail(item)")
				.hospital-name
					img(src="../../assets/image/healthCard/hospitalIcon.png")
					span {{item.orgName}}
					.qrcode( @click.stop="showCode(item.pdfRemoteUrl)")
						img(src="../../assets/image/healthCard/qrcode.png")
				.hospital-content
					.hospital-item
						p 发票类型：
							span {{item.invoiceType}}
						p 发票状态：
							span {{item.invoiceState}}
					.hospital-item
						p 发票金额：
							span {{item.totalAmount}}元
						p 开票日期：
							span {{item.createTime}}
		.invoice-qrcode(@click="closeQRCode" :class="{'active':showQRCodeDom}")
			.img-box
				canvas(canvas-id="QRCode")
				.hint 到院自助机扫描该二维码<br/>即可打印发票
</template>

<script>
import drawQrcode from 'weapp-qrcode'
import noItem from '@/components/no-item'
import fieldItem from '@/components/field-item'
export default {
	name: 'invoice',
	data() {
		return {
			list: [],
			name: '',
			noItem: false,
			showQRCodeDom: false,
			page: 0,
			size: 10
		}
	},
	created() {},
	mounted() {
		this.name = this.wx.getStorageSync('findPatient').name
		this.getInvoice()
	},
	onShow() {
		if (this.wx.getStorageSync('isReload').reload) {
			this.list = []
			this.page = 0
			this.noItem = false
			this.showQRCodeDom = false
			this.name = this.wx.getStorageSync('findPatient').name
			this.wx.setStorage({
				key: 'isReload',
				data: {
					reload: false
				}
			})
			this.getInvoice()
		}
	},
	methods: {
		findPatient() {
			this.$router.push({
				path: '/views/doctorRecord/findPatient'
			})
		},
		goDetail(item) {
			this.wx.setStorage({
				key: 'jumpUrl',
				data: {
					url: item.pdfRemoteUrl,
					title: '发票详情'
				}
			})
			this.$router.push({
				path: '/views/webview/webview'
			})
		},
		showCode(url) {
			this.showQRCodeDom = true
			drawQrcode({
				canvasId: 'QRCode',
				text: url
			})
		},
		closeQRCode() {
			this.showQRCodeDom = false
		},
		getInvoice() {
			this.wx.showLoading({
				title: '加载中',
				icon: 'none'
			})
			this.page++
			let findPatient = this.wx.getStorageSync('findPatient')

			this.api.jtApi
				.invoice({
					pageNo: this.page,
					pageSize: this.size,
					name: findPatient.name,
					cardType: findPatient.cardType,
					cardNum: findPatient.cardNumber
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.ret_code === '0') {
						let list = this.tools.formatToArray(data.details.detail)
						list.forEach(item => {
							item.invAttribute === '001' && (item.invoiceType = '医院挂号')
							item.invAttribute === '002' && (item.invoiceType = '医院门诊')
							item.invAttribute === '003' && (item.invoiceType = '医院住院')

							item.makeStatus === '-1' && (item.invoiceState = '开票失败')
							item.makeStatus === '0' && (item.invoiceState = '开票中')
							item.makeStatus === '1' && (item.invoiceState = '开票成功')

							item.totalAmount = this.filter.formatIncome(item.totalAmount)
							item.createTime = this.dayjs(parseInt(item.createTime)).format(
								'YYYY-MM-DD'
							)
						})

						this.list = this.list.concat(list)
						this.noItem = this.list.length <= 0
						this.overFlag = data.total_count === this.list.length.toString()
					}
					this.noItem = this.list.length <= 0
				})
				.catch(() => {
					this.noItem = this.list.length <= 0
					this.wx.hideLoading()
				})
		},
		scrollToLower() {
			!this.overFlag && this.getInvoice()
		}
	},
	components: {
		fieldItem,
		noItem
	}
}
</script>

<style lang="stylus">
	.invoice-wrap
		.invoice-content
			position absolute
			top 100px
			left 0
			right 0
			bottom 0
			.invoice-item
				background-color white
				margin-top mainMargin
				padding mainPadding
			.hospital-name
				display flex
				align-items center
				line-height 44px
				font-size 32px
				color #2693FF
				font-weight 500
				position relative
				& > img
					width 38px
					height 38px
					margin-right 14px
				.qrcode
					width 36px
					height 36px
					padding mainPadding
					position absolute
					top 50%
					right -30px
					transform translate3d(0,-50%,0)
					img
						width 100%
						height 100%
						display block
			.hospital-content
				line-height 40px
				display flex
				align-items center
				font-size 28px
				padding mainPadding 0 0
				position relative
				.hospital-item
					width 50%
					color blackFontColor1A
					p
						overflow hidden
						white-space nowrap
						text-overflow ellipsis
						&:last-child
							padding-top 24px
					span
						color blackFontColor66
		.invoice-qrcode
			position fixed
			z-index 51
			background-color rgba(0,0,0,0.5)
			cover()
			center()
			pointer-events none
			opacity 0
			.img-box
				padding 10px
				border-radius 15px
				background-color white
				width 500px
				canvas
					width 100%
					height 500px
				.hint
					font-weight 500
					text-align center
					margin-top 10px
					font-size 28px
					line-height 40px
					color blackFontColor4C
			&.active
				opacity 1
				pointer-events all
</style>
